---
title: Magic Card
date: 2023-07-02
description: A spotlight effect that follows your mouse cursor and highlights borders on hover.
author: dillionverma
published: true
video: https://cdn.magicui.design/magic-card.mp4
---

<ComponentPreview name="magic-card-demo" />

<Steps>

### Installation

Copy and paste the following code into your project.

```text
components/magicui/magic-card.tsx
```

<ComponentSource name="magic-card" />

</Steps>

## Examples

### Radial Gradient border

<ComponentPreview name="magic-card-gradient" />

## Props

### MagicContainer

| Prop name | Type      | Default | Description                             |
| --------- | --------- | ------- | --------------------------------------- |
| children  | ReactNode | -       | The children to render                  |
| className | string    | -       | The className to apply to the container |

### MagicCard

| Prop name      | Type      | Default                | Description                        |
| -------------- | --------- | ---------------------- | ---------------------------------- |
| children       | ReactNode | -                      | The children to render             |
| className      | string    | -                      | The className to apply to the card |
| maskSize       | number    | 200                    | The size of the spotlight mask     |
| borderColor    | string    | rgba(120,119,198)      | The color of the border            |
| borderWidth    | number    | 1                      | The width of the border            |
| borderRadius   | number    | 16                     | The radius of the border           |
| spotlight      | boolean   | true                   | Whether to show the spotlight      |
| spotlightColor | string    | rgba(120,119,198,0.08) | The color of the spotlight         |
| isolated       | boolean   | true                   | Whether to isolate the card        |
| background     | string    | rgba(120,119,198, 0.2) | The background of the card         |

## Credits

This component is inspired by [Linear.app](https://linear.app/features)
